<template>
    <div>
        <!-- 表格 -->
        <div class="tab">
            <el-table :data="list" style="width: 100%; border-radius: 5px;">
                <el-table-column sortable prop="create_time" :label="PorgranList.time" width="180" />
                <el-table-column prop="name" :label="PorgranList.name" width="180" />
                <el-table-column prop="phone" :label="PorgranList.telephoneNumber" width="180" />
                <el-table-column prop="message" :label="PorgranList.message" />
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="example-pagination-block">
            <div class="example-demonstration">
            </div>
            <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 30, 40]" :total="tableData.length"
                :page-size="page.pagesize" @current-change="changepage" @size-change="changesize" />
        </div>
    </div>
</template>
<script>
import { getLeaveMessageList } from '@/api/status'
export default {
    data() {
        return {
            PorgranList: {
                time: "留言时间",
                name: "姓名",
                telephoneNumber: '电话号码',
                message: "留言内容"
            },
            page: {
                //分页
                page: 1,
                pagesize: 10
            },
            tableData: [],
            list: [],//table中的数据
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            getLeaveMessageList().then((res) => {
                this.tableData = res.data.data
                this.list = this.tableData.slice((this.page.page - 1) * this.page.pagesize, (this.page.page - 1) * this.page.pagesize + this.page.pagesize)
            }).catch(() => {
                this.$message({
                    message: '网络不给力呦',
                    type: 'warning'
                });
            })

        },
        changepage(e) {
            this.page.page = e,
                this.getList()
        },
        changesize(e) {
            this.page.pagesize = e,
                this.getList()
        },
    }
}
</script>
<style scoped lang="less">
.example-pagination-block {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    .example-demonstration {
        line-height: 32px;
    }
}

.tab {
    margin: 10px;
    padding: 10px;
    background-color: #fff;
}
</style>